<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-input placeholder="角色名称" v-model="searchParams.roleName" />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button @click="resetSearch">清空</el-button>
    </el-form>

    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="addRole" v-if="$hasBP('btn.Role.add')">添加</el-button>
      <el-button type="danger" @click="revomveUsers" :disabled="selectedRoles.length === 0"
        v-if="$hasBP('role.remove')">批量删除</el-button>
    </div>

    <el-table :data="roleItems" border stripe style="width: 100%" v-loading="listLoading">
      <el-table-column type="selection" width="55" />

      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>

      <el-table-column label="角色名称" prop="roleName">
        <template slot-scope="{ row }">
          <template v-if="row.edit">
            <el-input v-model="row.roleName" class="edit-input" size="small" />
            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
              取消
            </el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row }">
          <HintButton size="mini" type="info" icon="el-icon-info" title="分配权限" v-if="$hasBP('btn.Role.assgin')" @click="
            $router.push(`/acl/role/auth/${row.id}?roleName=${row.roleName}`)
          " />
          <HintButton size="mini" type="primary" icon="el-icon-check" title="确定" @click="updateRole(row)"
            v-if="$hasBP('rbtn.Role.update') && row.edit" />
          <HintButton size="mini" type="primary" icon="el-icon-edit" title="修改角色" @click="row.edit = true"
            v-if="$hasBP('btn.Role.update') && !row.edit" />
          <HintButton size="mini" type="danger" icon="el-icon-delete" title="删除角色" @click="removeRole(row)"
            v-if="$hasBP('btn.Role.remove')" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination :current-page="page" :page-size="limit" :total="roleTotal" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 20px 0" layout="prev, pager, next, jumper, ->, sizes, total" @current-change="getRoles"
      @size-change="handleSizeChange" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import RoleApi from "@/api/acl/role";
export default {
  name: "RoleList",
  data() {
    return {
      listLoading: false,
      page: 1, // 当前页码
      limit: 5, // 每页记录数
      searchParams: {
        // 发送请求的条件参数数据
        roleName: "",
      },
    };
  },
  methods: {
    //获取角色列表
    getRoles(page = 1) {
      this.page = page;
      // this.listLoading = true;
      const { limit, searchParams } = this;
      this.$store.dispatch("getRoles", { page, limit, searchParams });
    },
    //查询
    search() {
      this.getRoles();
    },
    //清空
    resetSearch() {
      this.searchParams = {
        roleName: "",
      };
      this.getRoles();
    },
    //添加角色
    addRole() {
      // 显示添加界面
      this.$prompt("请输入新名称", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          RoleApi.save({ roleName: value }).then((result) => {
            this.$message.success(result.message || "添加角色成功");
            this.getRoles();
          });
        })
        .catch(() => {
          this.$message.warning("取消添加");
        });
    },
    //编辑更新按钮
    updateRole(role) {
      RoleApi.updateById({ id: role.id, roleName: role.roleName }).then(
        (result) => {
          this.$message.success(result.message || "更新角色成功!");
          this.getRoles(this.page);
        }
      );
    },

    //取消修改
    cancelEdit(role) {
      role.roleName = role.originRoleName;
      role.edit = false;
      this.$message.warning("取消角色修改");
    },

    // 删除指定的角色
    removeRole({ id, roleName }) {
      this.$confirm(`确定删除 '${roleName}' 吗?`, "提示", {
        type: "warning",
      })
        .then(async () => {
          const result = await RoleApi.removeById(id);
          this.getRoles(this.roles.length === 1 ? this.page - 1 : this.page);
          this.$message.success(result.message || "删除成功!");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    //处理pageSize发生改变回调
    handleSizeChange(val) {
      this.limit = val;
      this.getRoles();
    },

    // 删除所有选中的用户
    revomveUsers() {
      this.$confirm("确定删除吗?")
        .then(async () => {
          const result = await RoleApi.removeUsers(this.selectedIds);
          this.$message.success("删除成功");
          this.getUsers();
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
  },
  computed: {
    ...mapGetters(["roleItems", "roleTotal"]),
  },
  mounted() {
    this.getRoles();
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
